<template>
  <div>
    <h2>关于v-model用法</h2>
    <hr>
    <div>
      用户名：
      <!-- 1. v-model使用在原生DOM标签上 -->
      <!-- <input v-model="uname" type="text"> -->
      <!-- v-model是如下写法的语法糖 -->
      <!-- $event表示事件对象 -->
      <input :value="uname" type="text" @input="uname=$event.target.value">
    </div>
    <div>
      <button @click="handleClick">点击</button>
    </div>
    <div>
      <!-- 2. v-model使用在组件上：父子组件之间数据的双向传递 -->
      <!-- <my-child v-model="info" /> -->
      <!-- 上面的一句是下面这句的语法糖 -->
      <!-- <my-child :value="info" @input="info=$event" /> -->
      <!-- 此时的$event表示子组件传递的数据 -->

      <!-- -------------------------------------------- -->
      <!-- 都可以实现父子组件之间的数据双向传递 -->
      <!-- v-model仅仅可以使用一次，但是.sync可以使用多次 -->
      <my-child v-model="info" :msg.sync="msg" :abc.sync="abc" />

    </div>
  </div>
</template>
<script>
import MyChild from './MyChild.vue'

export default {
  name: 'Mytest',
  components: { MyChild },
  data () {
    return {
      uname: '',
      info: 'hi',
      msg: 'nihao',
      abc: 'hello'
    }
  },
  methods: {
    handleClick () {
      console.log(this.uname)
    }
  }
}
</script>
